<template>
  <eagle-list
    ref="eagleList"
    showTab
    filterTab
    :tabData="tabData"
    @initActive="_initActive"
    @bindData="bindData"
    :filterParams="filterParams"
    :activeFilter="activeFilter"
    isBeforeSearch
    @beforeSearch="beforeSearch"
  >
    <div v-if="this.active === 0">
      <eagle-cell
        class="card"
        v-for="(item, index) in list"
        :key="index"
      >
        <div>
          <eagle-row>
            <eagle-col span="24">
              {{ index + 1 }}、<b>{{ item.ResourceName }}</b>
            </eagle-col>
          </eagle-row>
          <eagle-row
            gutter="20"
            class="dep_sort"
          >
            <eagle-col span="24">
              <img
                src="@/assets/Images/AppIcon/icon_list_contract_number.png"
                alt=""
              />数量：{{ item.ResourceNum }}
            </eagle-col>
          </eagle-row>
          <eagle-row
            gutter="20"
            class="dep_sort"
          >
            <eagle-col span="24">
              <img
                src="@/assets/Images/AppIcon/icon_list_area.png"
                alt=""
              />位置：{{ item.Position }}
            </eagle-col>
          </eagle-row>
          <eagle-row
            gutter="20"
            class="dep_sort"
            v-if="item.ResourceRemarks"
          >
            <eagle-col span="24">
              <img
                src="@/assets/Images/AppIcon/icon_list_detail.png"
                alt=""
              />备注：{{ item.ResourceRemarks }}
            </eagle-col>
          </eagle-row>
          <eagle-divider />
          <eagle-row
            gutter="20"
            class="dep_sort"
          >
            <eagle-col span="12">
              <eagle-button
                :color="
                  item.CheckResult == 'Y' && item.checked ? '#07c160' : ''
                "
                class="submit-check"
                type="default"
                @click.stop="handleClick(index, 'Y')"
              >正常
              </eagle-button>
            </eagle-col>
            <eagle-col span="12">
              <eagle-button
                :color="
                  item.CheckResult == 'N' && item.checked ? '#ff0000' : ''
                "
                class="submit-check"
                type="default"
                @click.stop="handleClick(index, 'N')"
              >异常
              </eagle-button>
            </eagle-col>
          </eagle-row>
          <eagle-form v-if="item.CheckResult == 'N' && item.checked">
            <div class="inconformity-list">
              <eagle-input
                required
                rows="3"
                class="input_text"
                name="uploader"
                label="隐患图片"
              >
                <template #input>
                  <eagle-image-uploader :images.sync="item.Attachs"></eagle-image-uploader>
                </template>
              </eagle-input>
              <eagle-input
                label="问题描述"
                v-model="item.CheckDesc"
                rows="3"
                autosize
                required
                isInputText
                type="textarea"
                placeholder="请输入问题描述"
              ></eagle-input>
              <eagle-input
                label="整改措施描述"
                v-model="item.CorrectiveMeasures"
                rows="3"
                isInputText
                required
                autosize
                type="textarea"
                placeholder="请输入整改措施描述"
              ></eagle-input>
              <!-- 日期 Date-->
              <eagle-date
                label="整改期限"
                required
                :IsCurrentTime="false"
                :date.sync="item.CorrectiveDate"
              ></eagle-date>
              <eagle-input
                name="CheckNames"
                v-model="item.CorrectiveResponsibleChnName"
                label="整改责任人"
                :autosize="true"
                :islink="true"
                :isInputText="true"
                :rows="1"
                required
                readonly
                placeholder="请选择"
                @click="showUser(index, item)"
              ></eagle-input>
            </div>
          </eagle-form>
        </div>
      </eagle-cell>
      <template>
        <div class="bottom-buttons">
          <eagle-button
            class="submit-button"
            type="primary"
            square
            @click="SaveCheckDetails('0')"
          >提交</eagle-button>
          <eagle-button
            square
            class="save-btn"
            @click="SaveCheckDetails('1')"
            type="info"
          >暂存</eagle-button>
        </div>
        <!--责任人-->
        <user-choose
          :show.sync="userChooseDialogShow"
          @callback="userChooseCallback"
          :isMulti="false"
        >
        </user-choose>
      </template>
    </div>
    <div v-if="this.active === 1">
      <eagle-cell
        class="card"
        v-for="(item, index) in list"
        :key="index"
      >
        <eagle-tag
          v-if="item.CorrectiveStatus === 100"
          class="info_tag"
          type="normal"
        >已整改
        </eagle-tag>
        <eagle-tag
          v-if="item.CorrectiveStatus === 10"
          class="info_tag"
          type="danger"
        >未整改
        </eagle-tag>
        <div>
          <div @click="goDetail(item)">
            <eagle-row>
              <eagle-col span="24">
                <h3>{{ item.CheckDesc || "暂无任何描述" }}</h3>
              </eagle-col>
            </eagle-row>
            <eagle-row
              gutter="20"
              class="dep_sort"
            >
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />整改期限：{{ getDate(item.CorrectiveDate) }}
              </eagle-col>
            </eagle-row>
            <eagle-row
              gutter="20"
              class="dep_sort"
            >
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                  alt=""
                />发现人：{{ item.CreateChnName }}
              </eagle-col>
            </eagle-row>
          </div>
        </div>
      </eagle-cell>
    </div>
  </eagle-list>
</template>

<script>
import { getDate } from "@/utils/getDate";
import userChoose from "@/views/components/user/userChooseDialog.vue";

export default {
  components: {
    userChoose,
  },
  data() {
    return {
      active: 0,
      list: [],
      positionCode: this.$route.query.positionCode,
      tabData: [
        {
          title: "实施检查",
          //url: "/PlanEmergencyResourceCheck/GetCheckEntity",
          url: "/PlanEmergencyResourceCheck/GetPositionResourseData",
          params: {
            positionCode: this.$route.query.positionCode,
            ercCode: "",
          },
          isPage: false,
        },
        {
          title: "整改反馈",
          url: "/PlanEmergencyResourceCheck/GetPageData",
          params: {
            dataType: "ListRecords",
            positionCode: this.$route.query.positionCode,
          },
          isPage: true,
        },
      ],
      // showTab: false,
      filterTab: false,
      filterParams: [
        {
          name: "CorrectiveStatus",
          title: "整改状态",
          originTitle: "整改状态",
          dataType: "int",
          data: [
            { text: "不限", value: "" },
            { text: "未整改", value: "10" },
            { text: "已整改", value: "100" },
          ],
        },
      ],
      activeFilter: [
        {
          active: 0,
          filter: false,
        },
      ],
      userChooseDialogShow: false,
      userTagData: [],
      index: "",
      saveOp: "",
      keyObject: {},
      formData: [],
      Status: "",
      selectedValue: "",
      rowIndex: "0",
      id: "",
      checkReqiureDesc: "",
    };
  },
  created() {},
  methods: {
    getDate(data) {
      return getDate(data);
    },
    _initActive(active) {
      if (active === 1) {
        this.filterTab = true;
      }
      if (active === 0) {
        this.filterTab = false;
      }
      this.active = active;
    },
    bindData(data) {
      if (this.active == 0) {
        this.bindData1(data);
      }
      if (this.active == 1) {
        this.bindData2(data);
      }
    },
    bindData1(data) {
      let newList = [];
      let Position = data.Position;
      this.Position = data.Position;
      this.checkReqiureDesc = data.CheckReqiureDesc;
      let Status = data.Status;
      data.Details.map((item, index) => {
        item.Status = Status;
        item.Position = Position;
        item.checked = item.CheckResult;
        newList.push(item);
      });
      this.list = newList;
    },
    bindData2(data) {
      this.list = data;
    },
    showUser(index, item) {
      this.selectedValue = item.CorrectiveResponsibleUserName;
      this.rowIndex = index;
      this.keyObject = {
        index,
      };
      this.userChooseDialogShow = true;
    },
    // 选择部门人回调
    userChooseCallback(item) {
      const index = this.keyObject.index;
      this.list.map((item1, idx) => {
        if (index == idx) {
          item1.CorrectiveResponsibleUserName = item.code || "";
          item1.CorrectiveResponsibleChnName = item.name || "";
        }
      });
      this.userChooseDialogShow = false;
    },
    //点击正常、异常
    handleClick(index, CheckResult) {
      this.list.map((item, idx) => {
        if (index == idx) {
          if (item.CheckResult == CheckResult) {
            item.checked = !item.checked;
            item.CheckResult = "";
          } else {
            item.checked = true;
            item.CheckResult = CheckResult;
          }
        }
      });
    },
    //整改情况跳转
    goDetail(item) {
      this.$router.push({
        path: "/PlanEmergencyResourceCheckDetail",
        query: { positionCode: item.PositionCode, code: item.Code },
      });
    },
    // 保存
    SaveCheckDetails(saveOp) {
      this.saveOp = saveOp;
      if (saveOp == "0") {
        this.Status = 20;
      } else {
        this.Status = 10;
      }
      let newArr = [];
      var message = "";
      var index = 1;
      this.list.map((item1) => {
        if (item1.CheckResult == "N" && saveOp == "0") {
          if (!item1.Attachs) {
            message =
              message + "[" + item1.Order + "] 的隐患图片未选择不能提交 ";
          }
          if (!item1.CheckDesc) {
            message =
              message + "[" + item1.Order + "] 的问题描述未填写不能提交 ";
          }
          if (!item1.CorrectiveMeasures) {
            message =
              message + "[" + item1.Order + "] 的整改措施描述未填写不能提交 ";
          }
          if (!item1.CorrectiveDate) {
            message =
              message + "[" + item1.Order + "的 整改期限未填写不能提交 ";
          }
          if (!item1.CorrectiveResponsibleUserName) {
            message =
              message + "[" + item1.Order + "] 的整改责任人未填写不能提交 ";
          }
        }
        if (!item1.ID && !item1.SEQ) {
          item1.ID = 0;
          item1.SEQ = index++;
        }
        newArr.push(item1);
      });
      if (message) {
        return this.$toast(message);
      }
      const hasResult = newArr.filter((v) => v.CheckResult);
      const noResult = newArr.filter((v) => !v.CheckResult && !v.checked);
      if (hasResult.length == 0) {
        this.$toast("未包含任何需暂存/提交的点检记录");
        return;
      }
      let formData = [];
      newArr.map((item) => {
        if (item.CheckResult) {
          item.PositionCode = this.positionCode;
          formData.push(item);
        }
      });
      this.formData = formData;
      let params = {
        ID: this.id,
        Position: this.Position,
        Status: this.Status,
        positionCode: this.positionCode,
        CheckReqiureDesc: this.checkReqiureDesc,
        details: this.formData,
      };
      let _this = this;
      _this.$axios
        .post("/PlanEmergencyResourceCheck/SaveCheck", params)
        .then((res) => {
          _this.$toast("保存成功");
          _this.loading = false;
          setTimeout(() => {
            _this.$router.goRefresh();
          }, 500);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    beforeSearch() {
      let _this = this;
      _this.$axios
        .get("/PlanEmergencyResourceCheck/GetCheckEntity", {
          params: {
            positionCode: this.$route.query.positionCode,
          },
        })
        .then((res) => {
          _this.tabData[0].params.ercCode = res.data.ERCCode;
          _this.id = res.data.ID;
          _this.$refs.eagleList.getList();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.dep_sort {
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.inconformity-list {
  background-color: #fff;
  margin-top: 10px;
  padding-top: 10px;
}
.bottom-buttons {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  .submit-button {
    width: 50%;
    float: left;
    border: none;
  }
  .save-btn {
    width: 50%;
    float: left;
    border: none;
  }
}
.submit-check {
  width: 100%;
  height: 35px;
  margin-top: 10px;
}
</style>
